<template>
    <div>
        <table class="table table-berdered">
            <tr v-for="item in students" :key="item.id">
                <td>{{ item.name }}</td>
                <td>{{ item.age }}</td>
                <td>{{ item.gender }}</td>
                <td>{{ item.hometown }}</td>
                <td>
                    <img :src="item.photo" alt="" width="100" height="100">
                </td>
            </tr>
        </table>
        <select>
            <option value=""></option>
            <option v-bind:value="item.id" v-for="item in provinces" :key="item.id">{{ item.name }}</option>
        </select>
    </div>
</template>

<script setup lang="ts">
import { ref,reactive } from 'vue';
let students = ref([
{
id:1,
name: '张三',
age: 16,
gender: 0,
hometown: '广东省',
photo:
'https://q3.itc.cn/q_70/images03/20240613/862cf9ebe25b4bbfb95bdf2a1bf1aec0.jpeg',
},
{
    id:2,
name: '李四',
age: 17,
gender: 1,
hometown: '河北省',
photo:
'https://q3.itc.cn/q_70/images03/20240613/862cf9ebe25b4bbfb95bdf2a1bf1aec0.jpeg',
},
{
    id:3,
name: '王五',
age: 18,
gender: 1,
hometown: '福建省',
photo:
'https://q3.itc.cn/q_70/images03/20240613/862cf9ebe25b4bbfb95bdf2a1bf1aec0.jpeg',
},
{
    id:4,
name: '马六',
age: 19,
gender: 0,
hometown: '河南省',
photo:
'https://q3.itc.cn/q_70/images03/20240613/862cf9ebe25b4bbfb95bdf2a1bf1aec0.jpeg',
},
]);
const provinces = ref([
{ id:1, name: '北京市', code: '110000' },
{ id:2,name: '天津市', code: '120000' },
{ id:3,name: '河北省', code: '130000' },
{ id:4,name: '山西省', code: '140000' },
{ id:5,name: '内蒙古自治区', code: '150000' },
{ id:6,name: '辽宁省', code: '210000' },
{ id:7,name: '吉林省', code: '220000' },
{id:8, name: '黑龙江省', code: '230000' },
{ id:9,name: '上海市', code: '310000' },
{ id:10,name: '江苏省', code: '320000' },
{ id:11,name: '浙江省', code: '330000' },
{ id:12,name: '安徽省', code: '340000' },
{ id:13,name: '福建省', code: '350000' },
{ id:14,name: '江西省', code: '360000' },
{ id:15,name: '山东省', code: '370000' },
{ id:16,name: '河南省', code: '410000' },
{ id:17,name: '湖北省', code: '420000' },
{ id:18,name: '湖南省', code: '430000' },
{ id:19,name: '广东省', code: '440000' },
{ id:20,name: '广西壮族自治区', code: '450000' },
{ id:21,name: '海南省', code: '460000' },
{ id:22,name: '重庆市', code: '500000' },
{id:23, name: '四川省', code: '510000' },
{ id:24,name: '贵州省', code: '520000' },
{ id:25,name: '云南省', code: '530000' },
{id:26,name: '西藏自治区', code: '540000' },
{ id:27,name: '陕西省', code: '610000' },
{ id:28,name: '甘肃省', code: '620000' },
{ id:29,name: '青海省', code: '630000' },
{ id:30,name: '宁夏回族自治区', code: '640000' },
{id:31, name: '新疆维吾尔自治区', code: '650000' },
{ id:32,name: '台湾省', code: '710000' },
{ id:33,name: '香港特别行政区', code: '810000' },
{ id:34,name: '澳门特别行政区', code: '820000' },
]);

</script>

<style scoped>

</style>